<!DOCTYPE html>
<html lang="en-gb" dir="ltr">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>模态对话框 - UIkit 中文文档</title>
        <meta name="description" content="UIkit模态对话框，轻松创建拥有不同样式和过渡形式的模态对话框，带来更好的交互效果。">
        <meta name="author" content="UIkit中文网">
         
<meta name="keywords" content="UIKit模态对话框,遮罩层,覆盖层,模态对话框自适应,关闭对话框,Javascript模态对话框,JS模态对话框,选项卡下拉菜单,Modal component">
        <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
        <link rel="apple-touch-icon-precomposed" href="images/apple-touch-icon.png">
        <link id="data-uikit-theme" rel="stylesheet" href="css/uikit.docs.min.css">
        <link rel="stylesheet" href="css/docs.css">
        <link rel="stylesheet" href="../vendor/highlight/highlight.css">
        <script src="../vendor/jquery.js"></script>
        <script src="js/uikit.min.js"></script>
        <script src="../vendor/highlight/highlight.js"></script>
        <script src="js/docs.js"></script>
    </head>

    <body class="tm-background">

        <nav class="tm-navbar uk-navbar uk-navbar-attached">
            <div class="uk-container uk-container-center">

                <a class="uk-navbar-brand uk-hidden-small" href="../index.html"><img class="uk-margin uk-margin-remove" src="images/logo_uikit.svg" width="90" height="30" title="UIkit" alt="UIkit"></a>

                <ul class="uk-navbar-nav uk-hidden-small">
                    <li><a href="documentation_get-started.html">开始使用</a></li>
                    <li class="uk-active"><a href="core.html">核心组件</a></li>
                    <li><a href="components.html">附加组件</a></li>
                    <li><a href="customizer.html">定制工具</a></li>
                    <li><a href="../showcase/index.html">案例展示</a></li>
                    <li><a href="tutorials.html">视频教程</a></li>
                </ul>

                <a href="#tm-offcanvas" class="uk-navbar-toggle uk-visible-small" data-uk-offcanvas></a>

                <div class="uk-navbar-brand uk-navbar-center uk-visible-small"><img src="images/logo_uikit.svg" width="90" height="30" title="UIkit" alt="UIkit"></div>

            </div>
        </nav>

        <div class="tm-middle">
            <div class="uk-container uk-container-center">

                <div class="uk-grid" data-uk-grid-margin>
                    <div class="tm-sidebar uk-width-medium-1-4 uk-hidden-small">

                        <ul class="tm-nav uk-nav" data-uk-nav>

                            <li class="uk-nav-header">默认</li>
                            <li><a href="base.html">基础</a></li>
                            <li><a href="print.html">打印</a></li>

                            <li class="uk-nav-header">布局类组件</li>
                            <li><a href="grid.html">网格</a></li>
                            <li><a href="panel.html">面板</a></li>
                            <li><a href="block.html">块</a></li>
                            <li><a href="article.html">文章</a></li>
                            <li><a href="comment.html">评论</a></li>
                            <li><a href="utility.html">效果</a></li>
                            <li><a href="flex.html">Flex</a></li>
                            <li><a href="cover.html">覆盖</a></li>

                            <li class="uk-nav-header">导航类组件</li>
                            <li><a href="nav.html">导航菜单</a></li>
                            <li><a href="navbar.html">导航栏</a></li>
                            <li><a href="subnav.html">二级导航</a></li>
                            <li><a href="breadcrumb.html">面包屑</a></li>
                            <li><a href="pagination.html">分页</a></li>
                            <li><a href="tab.html">选项卡</a></li>
                            <li><a href="thumbnav.html">缩略图导航</a></li>

                            <li class="uk-nav-header">页面元素</li>
                            <li><a href="list.html">列表</a></li>
                            <li><a href="description-list.html">描述列表</a></li>
                            <li><a href="table.html">表格</a></li>
                            <li><a href="form.html">表单</a></li>

                            <li class="uk-nav-header">常用组件</li>
                            <li><a href="button.html">按钮</a></li>
                            <li><a href="icon.html">图标</a></li>
                            <li><a href="close.html">关闭</a></li>
                            <li><a href="badge.html">徽章</a></li>
                            <li><a href="alert.html">提示框</a></li>
                            <li><a href="thumbnail.html">缩略图</a></li>
                            <li><a href="overlay.html">遮罩</a></li>
                            <li><a href="text.html">文本</a></li>
                            <li><a href="column.html">列</a></li>
                            <li><a href="animation.html">动画</a></li>
                            <li><a href="contrast.html">对比度</a></li>

                            <li class="uk-nav-header">JavaScript组件</li>
                            <li><a href="dropdown.html">下拉菜单</a></li>
                            <li class="uk-active"><a href="modal.html">模态对话框</a></li>
                            <li><a href="offcanvas.html">抽屉</a></li>
                            <li><a href="switcher.html">切换器</a></li>
                            <li><a href="toggle.html">拨动器</a></li>
                            <li><a href="scrollspy.html">滚动监听</a></li>
                            <li><a href="smooth-scroll.html">平滑滚动</a></li>

                        </ul>

                    </div>
                    <div class="tm-main uk-width-medium-3-4">

                        <article class="uk-article">

                            <h1 class="uk-article-title">模态对话框</h1>

                            <p class="uk-article-lead">创建拥有不同样式和过渡形式的模态对话框。</p>

                            <h2 id="usage"><a href="#usage" class="uk-link-reset">用法</a></h2>
                            <p>模态对话框由一个遮罩层，一个对话框和一个关闭按钮组成。</p>

                            <div class="uk-overflow-container">
                                <table class="uk-table">
                                    <thead>
                                        <tr>
                                            <th>Class类</th>
                                            <th>描述</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td><code>.uk-modal</code></td>
                                            <td>添加这个类到一个 <code>&lt;div&gt;</code> 元素中创建对话框的容器和一个覆盖在页面上的空白遮罩层。为了能拨动这个元素，必须为它添加id。</td>
                                        </tr>
                                        <tr>
                                            <td><code>.uk-modal-dialog</code></td>
                                            <td>为一个后代 <code>&lt;div&gt;</code> 元素添加这个类，创建对话框。</td>
                                        </tr>
                                        <tr>
                                            <td><code>.uk-modal-close</code></td>
                                            <td>添加这个类到 <code>&lt;a&gt;</code> 或 <code>&lt;button&gt;</code> 元素，用来创建对话框中的关闭按钮。推荐为按钮添加 <a href="close.html">关闭按钮组件</a> 中的 <code>.uk-close</code> 类，以赋予适当的样式，你也可以使用文字或者图片。</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                            <p>你可以使用任意元素来触发模态对话框。一个 <code>&lt;a&gt;</code> 元素需要链接到模态对话框的id 。为了使必要的JavaScript生效，需要添加 <code>data-uk-modal</code> 属性。如果你使用的是其他元素，比如按钮，只需要添加 <code>data-uk-modal="{target:'#ID'}"</code> 元素指向模态对话框的。</p>

                            <h3 class="tm-article-subtitle">Example</h3>

                            <button class="uk-button" data-uk-modal="{target:'#modal'}">Open</button>
                            <a href="#modal" data-uk-modal>Open</a>
                            <div id="modal" class="uk-modal">
                                <div class="uk-modal-dialog">
                                    <a href="" class="uk-modal-close uk-close"></a>
                                    <h1>Headline</h1>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                                </div>
                            </div>

                            <h3 class="tm-article-subtitle">Markup</h3>

<pre><code>&lt;!-- 触发模态对话框的锚 --&gt;
&lt;a href="#my-id" data-uk-modal&gt;...&lt;/a&gt;

&lt;!-- 触发模态对话框的按钮 --&gt;
&lt;button class="uk-button" data-uk-modal="{target:'#my-id'}"&gt;...&lt;/button&gt;

&lt;!-- 模态对话框 --&gt;
&lt;div id="my-id" class="uk-modal"&gt;
    &lt;div class="uk-modal-dialog"&gt;
        &lt;a class="uk-modal-close uk-close"&gt;&lt;/a&gt;
        ...
    &lt;/div&gt;
&lt;/div&gt;</code></pre>

                            <hr class="uk-article-divider">

                            <h3>JavaScript 选项</h3>

                            <p>默认地，点击遮罩层会自动关闭模态对话框。如果要阻止它，只需要添加 <code>data-uk-modal="{target:'#ID',bgclose:false}"</code> 属性。</p>

                            <hr class="uk-article-divider">

                            <h2 id="modal-header-footer"><a href="#modal-header-footer" class="uk-link-reset">模态对话框的标题和脚注/Modal header and footer</a></h2>

                            <p>你可以为模态对话框创建标题和脚注，使它们与正文内容分离开。只需要添加 <code>.uk-modal-header</code> 或者 <code>.uk-modal-footer</code> 类到模态对话内部的 <code>&lt;div&gt;</code> 元素即可。</p>

                            <h3 class="tm-article-subtitle">Example</h3>

                            <button class="uk-button" data-uk-modal="{target:'#modal6'}">Open</button>
                            <div id="modal6" class="uk-modal">
                                <div class="uk-modal-dialog">
                                    <button type="button" class="uk-modal-close uk-close"></button>
                                    <div class="uk-modal-header">
                                        <h2>Headline</h2>
                                    </div>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                                    <div class="uk-modal-footer uk-text-right">
                                        <button type="button" class="uk-button">Cancel</button>
                                        <button type="button" class="uk-button uk-button-primary">Save</button>
                                    </div>
                                </div>
                            </div>

                            <h3 class="tm-article-subtitle">Markup</h3>

<pre><code>&lt;div class="uk-modal"&gt;
    &lt;div class="uk-modal-dialog"&gt;
        &lt;div class="uk-modal-header"&gt;...&lt;/div&gt;
        ...
        &lt;div class="uk-modal-footer"&gt;...&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;</code></pre>

                            <hr class="uk-article-divider">

                            <h2 id="modal-with-caption"><a href="#modal-with-caption" class="uk-link-reset">模态对话框的说明文字/Modal caption</a></h2>

                            <p>你还可以为模态对话框创建一个显示在它外部的说明文字。只需要天 <code>.uk-modal-caption</code> 类到模态对话框内部的 <code>&lt;div&gt;</code> 元素即可。</p>

                            <h3 class="tm-article-subtitle">Example</h3>

                            <button class="uk-button" data-uk-modal="{target:'#modal7'}">Open</button>
                            <div id="modal7" class="uk-modal">
                                <div class="uk-modal-dialog">
                                    <a href="" class="uk-modal-close uk-close"></a>
                                    <h1>Headline</h1>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                                    <div class="uk-modal-caption">Caption</div>
                                </div>
                            </div>

                            <h3 class="tm-article-subtitle">Markup</h3>

<pre><code>&lt;div class="uk-modal"&gt;
    &lt;div class="uk-modal-dialog"&gt;
        &lt;div class="uk-modal-caption"&gt;...&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;</code></pre>

                            <hr class="uk-article-divider">

                            <h2 id="lightbox-modifier"><a href="#lightbox-modifier" class="uk-link-reset">灯箱修饰/Lightbox modifier</a></h2>

                            <p>创建看起来像灯箱的模态对话框，只需要添加 <code>.uk-modal-dialog-lightbox</code> 类。如果你想要把图片显示在灯箱一样的模态对话框中时，这会很有用。关闭按钮会自动调整到对话框的相应位置。</p>

                            <h3 class="tm-article-subtitle">Example</h3>

                            <button class="uk-button" data-uk-modal="{target:'#modal-3'}">Open</button>
                            <div id="modal-3" class="uk-modal">
                                <div class="uk-modal-dialog uk-modal-dialog-lightbox">
                                    <a href="" class="uk-modal-close uk-close uk-close-alt"></a>
                                    <img src="images/placeholder_600x400.svg" width="600" height="400" alt="">
                                </div>
                            </div>

                            <h3 class="tm-article-subtitle">Markup</h3>

<pre><code>&lt;!-- 触发模态对话框的锚 --&gt;
&lt;a href="#my-id" data-uk-modal&gt;...&lt;/a&gt;

&lt;!-- 模态对话框 --&gt;
&lt;div id="my-id" class="uk-modal"&gt;
    &lt;div class="uk-modal-dialog uk-modal-dialog-lightbox"&gt;
        &lt;a href="" class="uk-modal-close uk-close uk-close-alt"&gt;&lt;/a&gt;
        &lt;img src="" alt=""&gt;
    &lt;/div&gt;
&lt;/div&gt;</code></pre>

                        <p><span class="uk-badge">注意</span> 在灯箱模态对话框中创建关闭按钮时，我们依然推荐添加 <a href="close.html">关闭组件</a> 中的 <code>.uk-close-alt</code> 类来赋予你的关闭按钮一个适当的样式。</p>

                        <hr class="uk-article-divider">


                        <h2><a href="#modal-blank" class="uk-link-reset">空白模态框</a></h2>

                        <p>重置所有样式，比如padding和margin,添加 <code>.uk-modal-dialog-blank</code> 类名即可。如果你想创建全屏模态框时，可以使用它。此时，你还需要用到<a href="utility.html">效果组件</a>中的 <code>.uk-height-viewport</code> 类名，使得模态框填充整个视口高度。</p>

                        <h3 class="tm-article-subtitle">Example</h3>

                        <a class="uk-button" href="#modal-blank" data-uk-modal>Open</a>
                        <div id="modal-blank" class="uk-modal">
                            <div class="uk-modal-dialog uk-modal-dialog-blank">
                                <button class="uk-modal-close uk-close" type="button"></button>
                                <div class="uk-grid uk-flex-middle" data-uk-grid-margin>
                                    <div class="uk-width-medium-1-2 uk-height-viewport uk-cover-background" style="background-image: url('images/placeholder_120x255.svg');"></div>
                                    <div class="uk-width-medium-1-2">
                                    <h1>Headline</h1>
                                        <div class="uk-width-medium-1-3">
                                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

<pre><code>&lt;!-- This is the anchor toggling the modal --&gt;
&lt;a href="#my-id" data-uk-modal&gt;...&lt;/a&gt;

&lt;!-- This is the modal --&gt;
&lt;div id="my-id" class="uk-modal"&gt;
    &lt;div class="uk-modal-dialog uk-modal-dialog-blank"&gt;...&lt;/div&gt;
&lt;/div&gt;</code></pre>

                        <hr class="uk-article-divider">

                        <h2 id="modal-with-spinner"><a href="#modal-with-spinner" class="uk-link-reset">模态对话框中的旋转/Modal spinner</a></h2>

                        <p>要在模态对话框中放入一个旋转的图标，添加 <code>.uk-modal-spinner</code> 类到模态对话框中的 <code>&lt;div&gt;</code> 元素即可。</p>

                        <h3 class="tm-article-subtitle">Example</h3>

                        <a class="uk-button" href="#modal-spinner" data-uk-modal>Open</a>
                        <div id="modal-spinner" class="uk-modal">
                            <div class="uk-modal-dialog">
                                <div class="uk-modal-spinner"></div>
                            </div>
                        </div>

                        <h3 class="tm-article-subtitle">Markup</h3>

<pre><code>&lt;div class="uk-modal"&gt;
    &lt;div class="uk-modal-dialog"&gt;
        &lt;div class="uk-modal-spinner"&gt;...&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;</code></pre>

                        <hr class="uk-article-divider">


                        <h2 id="center-modal"><a href="#center-modal" class="uk-link-reset">居中模态对话框</a></h2>

                        <p>垂直居中模态对话框，添加 <code>{center:true}</code> 选项到它的 data属性即可。</p>

                        <h3 class="tm-article-subtitle">Example</h3>

                        <a class="uk-button" href="#modal" data-uk-modal="{center:true}">Open</a>

                        <h3 class="tm-article-subtitle">Markup</h3>

<pre><code>&lt;a href="#my-id" data-uk-modal="{center:true}"&gt;&lt;/a&gt;</code></pre>

                        <hr class="uk-article-divider">

                        <h2 id="large-dialog-modifier"><a href="#large-dialog-modifier" class="uk-link-reset">大对话框修饰</a></h2>

                        <p>为模态对话框添加与网页相同的宽度，只需要添加 <code>.uk-modal-dialog-large</code> 类。</p>

                        <h3 class="tm-article-subtitle">Example</h3>

                        <a href="#modal-4" class="uk-button" data-uk-modal>Open</a>
                        <div id="modal-4" class="uk-modal">
                            <div class="uk-modal-dialog uk-modal-dialog-large">
                                <button type="button" class="uk-modal-close uk-close"></button>
                                <h1>Headline</h1>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                            </div>
                        </div>

<h3 class="tm-article-subtitle">Markup</h3>

<pre><code>&lt;div class="uk-modal-dialog uk-modal-dialog-large"&gt;...&lt;/div&gt;</code></pre>

                        <hr class="uk-article-divider">

                        <h2 id="overflow-container-in-modal"><a href="#overflow-container-in-modal" class="uk-link-reset">模态对话框中溢出容器</a></h2>

                        <p>你还可以把模态对话框的内容显示在可滚动的容器中。只需添加 <code>.uk-overflow-container</code> 类到模态对话框中的 <code>&lt;div&gt;</code> 元素即可。模态对话框会自动扩展填充到页面的高度。</p>

                        <h3 class="tm-article-subtitle">Example</h3>

                        <a href="#modal-5" class="uk-button" data-uk-modal>Open</a>
                        <div id="modal-5" class="uk-modal">
                            <div class="uk-modal-dialog uk-modal-dialog-large">
                                <button type="button" class="uk-modal-close uk-close"></button>
                                <h1>Headline</h1>
                                <h2>Some text above the scrollable box</h2>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                                <div class="uk-overflow-container">
                                    <h2>Overflow container</h2>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                                </div>
                                <h2>Some text below the overflow container</h2>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                            </div>
                        </div>

<h3 class="tm-article-subtitle">Markup</h3>

<pre><code>&lt;div class="uk-modal-dialog"&gt;
    &lt;p&gt;...&lt;/p&gt;
    &lt;div class="uk-overflow-container"&gt;...&lt;/div&gt;
    &lt;p&gt;...&lt;/p&gt;
&lt;/div&gt;</code></pre>

                        <hr class="uk-article-divider">

                        <h2 id="native-dialogs"><a href="#native-dialogs" class="uk-link-reset">对话框</a></h2>

                        <p>模态对话框组件还提供了原生对话框的选择： window.alert, window.confirm 和 window.prompt.</p>

                        <h3 class="tm-article-subtitle">Example</h3>

                        <button type="button" class="uk-button" onclick="UIkit.modal.alert('Attention!')">Alert</button>

<pre><code>UIkit.modal.alert("Attention!");</code></pre>

                        <button type="button" class="uk-button" onclick="UIkit.modal.confirm('Are you sure?', function(){ UIkit.modal.alert('Confirmed!'); });">Confirm</button>

<pre><code>UIkit.modal.confirm("Are you sure?", function(){
    // 点击OK确认后开始执行
});</code></pre>

                        <button type="button" class="uk-button" onclick="UIkit.modal.prompt('Name:', '', function(val){ UIkit.modal.alert('Hello '+(val || 'Mr noname')+'!'); });">Prompt</button>

<pre><code>UIkit.modal.prompt("Name:", value, function(newvalue){
    // 点击OK提交后执行
});</code></pre>

                        <button type="button" class="uk-button" onclick="(function(modal){ modal = UIkit.modal.blockUI('Wait 5 sec...'); setTimeout(function(){ modal.hide() }, 5000) })();">Block UI</button>屏蔽了UI界面

<pre><code>var modal = UIkit.modal.blockUI("Any content..."); // 使用 modal.hide() 解除屏蔽</code></pre>

                        <hr class="uk-article-divider">

                        <h2 id="javascript"><a href="#javascript" class="uk-link-reset">JavaScript</a></h2>

                        <p>你可以通过原生的Javascript处理模态对话框。</p>

                        <h3 class="tm-article-subtitle">Example</h3>

<pre><code>var modal = UIkit.modal(".modalSelector");

if ( modal.isActive() ) {
    modal.hide();
} else {
    modal.show();
}</code></pre>

                        <hr class="uk-article-divider">

                        <h3>事件</h3>

                        <p>每当模态对话框被打开时会触发一次 <code>show.uk.modal</code> 事件，每当被关闭时会触发一次 <code>hide.uk.modal</code> 事件。</p>

                        <h3 class="tm-article-subtitle">Example</h3>

<pre><code>$('.modalSelector').on({

    'show.uk.modal': function(){
        console.log("Modal is visible.");
    },

    'hide.uk.modal': function(){
        console.log("Element is not visible.");
    }
});</code></pre>

                            <h3>事件</h3>

                            <div class="uk-overflow-container">
                                <table class="uk-table uk-table-striped uk-text-nowrap">
                                    <thead>
                                        <tr>
                                            <th>名称</th>
                                            <th>参数</th>
                                            <th>描述</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td><code>show.uk.modal</code></td>
                                            <td>event</td>
                                            <td>模态对话框显示时</td>
                                        </tr>
                                        <tr>
                                            <td><code>hide.uk.modal</code></td>
                                            <td>event</td>
                                            <td>模态对话框隐藏时。</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                        </article>
                    </div>
                </div>

            </div>
        </div>

        <div class="tm-footer">
            <div class="uk-container uk-container-center uk-text-center">

                <ul class="uk-subnav uk-subnav-line uk-flex-center">
                    <li><a href="http://github.com/uikit/uikit">GitHub</a></li>
                    <li><a href="http://github.com/uikit/uikit/issues">Issues</a></li>
                    <li><a href="http://github.com/uikit/uikit/blob/master/CHANGELOG.md">Changelog</a></li>
                    <li><a href="https://twitter.com/getuikit">Twitter</a></li>
                </ul>

                <div class="uk-panel">
                    <p>Made by <a href="http://www.yootheme.com">YOOtheme</a> with love and caffeine.<br>Licensed under <a href="http://opensource.org/licenses/MIT">MIT license</a>.</p>
                    <a href="../index.html"><img src="images/logo_uikit.svg" width="90" height="30" title="UIkit" alt="UIkit"></a>
                </div>

            </div>
        </div>

        <div id="tm-offcanvas" class="uk-offcanvas">

            <div class="uk-offcanvas-bar">

                <ul class="uk-nav uk-nav-offcanvas uk-nav-parent-icon" data-uk-nav="{multiple:true}">
                    <li class="uk-parent"><a href="#">UIkit 中文文档</a>
                        <ul class="uk-nav-sub">
                            <li><a href="documentation_get-started.html">开始使用</a></li>
                            <li><a href="documentation_how-to-customize.html">如何定制</a></li>
                            <li><a href="documentation_layouts.html">布局示例</a></li>
                            <li><a href="core.html">核心组件</a></li>
                            <li><a href="components.html">附加组件</a></li>
                            <li><a href="documentation_project-structure.html">项目结构</a></li>
                            <li><a href="documentation_less-sass.html">Less &amp; Sass 文件</a></li>
                            <li><a href="documentation_create-a-theme.html">创建主题</a></li>
                            <li><a href="documentation_create-a-style.html">创建样式</a></li>
                            <li><a href="documentation_customizer-json.html">Customizer.json</a></li>
                            <li><a href="documentation_javascript.html">JavaScript</a></li>
                            <li><a href="documentation_custom-prefix.html">自定义前缀</a></li>
                        </ul>
                    </li>
                    <li class="uk-nav-header">Core</li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-wrench"></i> 默认</a>
                        <ul class="uk-nav-sub">
                            <li><a href="base.html">基础</a></li>
                            <li><a href="print.html">打印</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-th-large"></i> 布局类组件</a>
                        <ul class="uk-nav-sub">
                            <li><a href="grid.html">网格</a></li>
                            <li><a href="panel.html">面板</a></li>
                            <li><a href="block.html">块</a></li>
                            <li><a href="article.html">文章</a></li>
                            <li><a href="comment.html">评论</a></li>
                            <li><a href="utility.html">效果</a></li>
                            <li><a href="flex.html">Flex</a></li>
                            <li><a href="cover.html">覆盖</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-bars"></i> 导航类组件</a>
                        <ul class="uk-nav-sub">
                            <li><a href="nav.html">导航菜单</a></li>
                            <li><a href="navbar.html">导航栏</a></li>
                            <li><a href="subnav.html">二级导航</a></li>
                            <li><a href="breadcrumb.html">面包屑</a></li>
                            <li><a href="pagination.html">分页</a></li>
                            <li><a href="tab.html">选项卡</a></li>
                            <li><a href="thumbnav.html">缩略图导航</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-check"></i> 页面元素</a>
                        <ul class="uk-nav-sub">
                            <li><a href="list.html">列表</a></li>
                            <li><a href="description-list.html">描述列表</a></li>
                            <li><a href="table.html">表格</a></li>
                            <li><a href="form.html">表单</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-folder-open"></i> 常用组件</a>
                        <ul class="uk-nav-sub">
                            <li><a href="button.html">按钮</a></li>
                            <li><a href="icon.html">图标</a></li>
                            <li><a href="close.html">关闭</a></li>
                            <li><a href="badge.html">徽章</a></li>
                            <li><a href="alert.html">提示框</a></li>
                            <li><a href="thumbnail.html">缩略图</a></li>
                            <li><a href="overlay.html">遮罩</a></li>
                            <li><a href="text.html">文本</a></li>
                            <li><a href="column.html">列</a></li>
                            <li><a href="animation.html">动画</a></li>
                            <li><a href="contrast.html">对比度</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-magic"></i> JavaScript组件</a>
                        <ul class="uk-nav-sub">
                            <li><a href="dropdown.html">下拉菜单</a></li>
                            <li><a href="modal.html">模态对话框</a></li>
                            <li><a href="offcanvas.html">抽屉</a></li>
                            <li><a href="switcher.html">切换器</a></li>
                            <li><a href="toggle.html">拨动</a></li>
                            <li><a href="scrollspy.html">滚动监听</a></li>
                            <li><a href="smooth-scroll.html">平滑滚动</a></li>
                        </ul>
                    </li>
                    <li class="uk-nav-header">附加组件</li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-th-large"></i> 布局类组件</a>
                        <ul class="uk-nav-sub">
                            <li><a href="grid-js.html">动态网格</a></li>
                            <li><a href="grid-parallax.html">视差网格</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-bars"></i> 导航类组件</a>
                        <ul class="uk-nav-sub">
                            <li><a href="dotnav.html">圆点导航</a></li>
                            <li><a href="slidenav.html">滑动导航</a></li>
                            <li><a href="pagination-js.html">动态分页</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-folder-open"></i> 常用组件</a>
                        <ul class="uk-nav-sub">
                            <li><a href="form-advanced.html">高级表单</a></li>
                            <li><a href="form-file.html">文件表单</a></li>
                            <li><a href="form-password.html">密码表单</a></li>
                            <li><a href="form-select.html">选择表单</a></li>
                            <li><a href="placeholder.html">占位符</a></li>
                            <li><a href="progress.html">进度条</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-magic"></i> JavaScript组件</a>
                        <ul class="uk-nav-sub">
                            <li><a href="lightbox.html">灯箱</a></li>
                            <li><a href="autocomplete.html">自动完成</a></li>
                            <li><a href="datepicker.html">日期选择器</a></li>
                            <li><a href="htmleditor.html">HTML 编辑器</a></li>
                            <li><a href="slider.html">滚动条</a></li>
                            <li><a href="slideset.html">滑块集</a></li>
                            <li><a href="slideshow.html">幻灯片</a></li>
                            <li><a href="parallax.html">视差</a></li>
                            <li><a href="accordion.html">手风琴</a></li>
                            <li><a href="notify.html">通知</a></li>
                            <li><a href="search.html">搜索</a></li>
                            <li><a href="nestable.html">可嵌套</a></li>
                            <li><a href="sortable.html">可排序</a></li>
                            <li><a href="sticky.html">附着</a></li>
                            <li><a href="timepicker.html">时间选择器</a></li>
                            <li><a href="tooltip.html">工具提示</a></li>
                            <li><a href="upload.html">上传</a></li>
                        </ul>
                    </li>
                    <li class="uk-nav-divider"></li>
                    <li><a href="../showcase/index.html">案例展示</a></li>
                    <li><a href="tutorials.html">视频教程</a></li>
                </ul>

            </div>

        </div>

    </body>
</html>
